@use '@angular/material' as mat;

@mixin dropdown-menu-color($theme) {
  $config: mat.m2-get-color-config($theme);
  $foreground: map-get($config, foreground);
  $background: map-get($config, background);
  $primary: map-get($config, primary);
  $accent: map-get($config, accent);
  $warn: map-get($config, warn);

  $text-color: mat.m2-get-color-from-palette($foreground, text, 0.75);
  .mat-accordion {
    .mat-expansion-panel-header,
    .mat-mdc-list {
      border-color: mat.m2-get-color-from-palette(
        $foreground,
        divider
      ) !important;
    }
    .mat-expansion-panel-header-title {
      color: $text-color;
    }
    .mat-mdc-list {
      a {
        color: $text-color;
        &.active {
          color: mat.m2-get-color-from-palette($primary);
        }
      }
    }
  }

  .user-dropdown {
    .mat-mdc-menu-item {
      a {
        color: $text-color;
        &.active {
          color: mat.m2-get-color-from-palette($primary);
        }
      }
    }
  }

  .notify-menu {
    @include scrollbar(
      mat.m2-get-color-from-palette($foreground, divider, 0.2)
    );

    .mat-mdc-menu-content {
      .mat-mdc-list-item {
        &:hover {
          background-color: mat.m2-get-color-from-palette(
            $background,
            background
          );
        }
        .mat-line:nth-child(n + 2) {
          color: mat.m2-get-color-from-palette($foreground, text, 0.5);
        }
      }
      .mat-line {
        a {
          color: $text-color;
          &:hover {
            color: mat.m2-get-color-from-palette($primary);
          }
        }
      }
    }
  }
}
